<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<h1>index.html</h1>
<hr>
<div id="app">
    <input type="button" value="测试SpringMVC处理ajax" @click="testAjax"><br>
    <input type="button" value="使用@RequestBody注解处理json格式的请求参数" @click="testRequestBody"><br>

    <input type="button" value="使用@ResponseBody注解响应json格式的数据" @click="testResponseBody"><br>
    <a th:href="@{/test/down}">下载图片</a><br>
    <hr>
    <!--文件上传时，方式必须填post，编码方式必须设置multipart/form-data以二进制传输文件-->
    <form th:action="@{/test/up}" method="post" enctype="multipart/form-data">
        头像：<input type="file" name="photo"><br>
        <input type="submit" value="上传">
    </form>
</div>
<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
<script type="text/javascript">
    /*
    testAjax(){
         axios({

             url:"",//请求路径

             method:"",//请求方式

             //以name=value&name=value的方式发送的请求参数，
             //不管使用的请求方式是get或post，请求参数都会被拼接到请求地址后
             //这种方式的请求参数可以通过request.getParameter()获取
             params:{},

             //以json格式发送的请求参数，
             //请求参数会被保存到请求参数的请求体传输到服务器
             //这种方式的请求参数不能通过request.getParameter()获取
             data:{}

         }).then(response=>{
             console.log(response.data);
         });
     }
           */

    var vue = new Vue({
       el:"#app",
       methods:{
           testAjax(){
               //两种方式
               //axios.get(url[,config])
               //axios.post(url[,data[,config]])
               axios.post(
                   "/springmvc/test/ajax?id=1001",
                   {username:"admin", password:"123456"}
               ).then(response=>{
                   console.log(response.data)
               });
           },
           testRequestBody(){
               axios.post(
                   "/springmvc/test/RequestBody/json",
                   {username:"admin", password:"123456", age:23, gender:"男"}
               ).then(response=>{
                   console.log(response.data)
               });
           },
           testResponseBody(){
               axios.post("/springmvc/test/ResponseBody/json").then(response=>{
                   console.log(response.data)
               });
           }
       }
    });
</script>
</body>
</html>